<template>
  <div>
    <el-row type="flex" justify="center">
      <el-input v-model="numberString" size="mini"></el-input>
      <el-button type="primary" size="mini" @click="onSubmit" :disabled="sorting">开始排序</el-button>
      <el-button type="primary" size="mini" @click="stopSort" :disabled="!sorting">停止排序</el-button>
    </el-row>
    <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sorting: false,
      numberString: '5,4,3,2,3,4,1',
      numbers: [],
      myChart: undefined,
      option: {
        xAxis: {
          type: 'category',
          data: [],
          animationDuration: 0,
          animationDurationUpdate: 400,
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          // realtimeSort: true,
          data: [{
            value: undefined,
            itemStyle: {
              color: '#6e7074'
            }
          }],
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          }
        }],
        animationDuration: 0,
        animationDurationUpdate: 400
      }
    }
  },
  components: {},
  mounted() {
    this.initialEcharts()
  },
  created() {
  },
  computed: {},
  watch: {},
  methods: {
    stopSort() {
      this.sorting = false
      this.resetData()
      this.dealWithInput()
      this.setOption()
    },
    onSubmit() {
      this.sorting = true
      this.resetData()
      this.dealWithInput()
      this.setOption()
      this.checkLoop()
    },
    checkLoop() {
      let loop0 = () => {
        setTimeout(() => {
          if (this.checkOrder(this.option.series[0].data)) {
            this.sorting = false
            return
          }
          this.disOrder(this.option.series[0].data)
          this.sorting && loop0()
        }, 400)
      }
      loop0();
    },
    resetData() {
      this.option.xAxis.data = []
      this.option.series[0].data = []
    },
    setOption() {
      this.myChart.setOption(this.option)
    },
    checkOrder(array) {

      for (let ii = 0; ii < array.length; ii++) {

        for (let index = 0; index < this.option.series[0].data.length; index++) {
          this.option.series[0].data[index].itemStyle.color = '#6e7074'
        }

        if (ii <= this.option.series[0].data.length - 1) {
          // 设为红色
          this.option.series[0].data[ii].itemStyle.color = '#FF7C7C'
        }

        this.setOption()

        if (ii >= array.length - 1) {
          return true
        }

        if (array[ii].value > array[ii + 1].value) {
          return false;
        }
      }
    },
    disOrder(array) {
      for (let i = 0; i < array.length; i++) {
        let index = this.getRndInteger(0, array.length - 1)
        let v = array[index].value
        array[index].value = array[i].value
        array[i].value = v
      }
    },
    getRndInteger(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    },
    dealWithInput() {
      // 转为数字
      let numbers = this.numberString.split(',').map(x => parseInt(x)).filter(m => this.isRealNum(m))
      // 获取series[0].data数据
      this.option.series[0].data = numbers.map(x => {
        return {
          value: x,
          itemStyle: {
            color: '#6e7074'
          }
        }
      })
      // 获取x轴数值
      for (let i = 0; i < numbers.length; i++) {
        this.option.xAxis.data.push(i)
      }
    },
    isRealNum(value) {
      if (value === '' || value === null) {
        return false
      }
      return !isNaN(value) && typeof value === 'number'
    },
    initialEcharts() {
      var chartDom = document.getElementById('myChart');
      this.myChart = this.$echarts.init(chartDom)
    }
  }
}
</script>
<style></style>
